<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">
        if (window.WebSocket) {
            var webSocket = new WebSocket("ws://192.168.122.134:9502");
            console.log(webSocket);

            webSocket.onopen = function (event) {
//                console.log(event)
                $.post("{:url('ajax/join')}", {username: {$uid}}, function (data) {
                    webSocket.send(JSON.stringify({'type': "login", 'data': {$uid}}));
                });
            };

            webSocket.onmessage = function (event) {
                var data = JSON.parse(event.data);
                console.log(data);
                if (data.type == "login") {
                    $.post("{:url('ajax/user_list')}", function (data) {
                        $("#user_list").empty();
                        $("#user_list").append(data.user_list);
                        $("#online").text(data.count)
                    });
                }
                if (data.type == "out") {
                    $.post("{:url('ajax/out')}", {username: data.uid}, function (data) {
                        $("#user_list").empty();
                        $("#user_list").append(data.user_list);
                        $("#online").text(data.count)
                    });
                }
                if (data.type == "message") {
                    $("#content").append(data.data);
                }
                if (data.type == "message_one") {
                    $("#content").append(data.data);
                }
            };

            webSocket.onclose = function () {
                alert("断开连接");
            };

            function sendMessage() {
                var message = $("#message").val();
                var receive_uid = $("#one").val();
                var send_uid = {$uid};
                if (message) {
                    console.log(receive_uid);
                    if (receive_uid > 0) {
                        $.post("{:url('ajax/send_one')}", {
                            send_uid:send_uid,
                            receive_uid: receive_uid,
                            msg: message
                        }, function (data) {
                            webSocket.send(JSON.stringify({
                                'type': "message",
                                'data': data.data,
                                'array': {send_uid, receive_uid}
                            }));
                        });
                    } else {
                        $.post("{:url('ajax/send')}", {uid: {$uid}, msg: message}, function (data) {
                            webSocket.send(JSON.stringify({'type': "message", 'data': data.data}));
                        });
                    }
                }
            }
        } else {
            console.log("您的浏览器不支持WebSocket");
        }
    </script>
</head>
<body>

<div id="user_list">
</div>
<div style="width:600px;margin:0 auto;border:1px solid #ccc;">
    <div id="content" style="overflow-y:auto;height:300px;">
        {volist name="user_mes" id="v"}
        <div>
            <h3 style='margin-left: 30%;'>{$v['time']|date="M-d H:i:s",###}</h3>
            <span>{$v['uid']}</span>::
            <span>{$v['msg']}</span>
        </div>
        {/volist}
    </div>
    <hr/>
    <div style="height:40px">
        <input type="text" id="message" style="margin-left:10px;height:25px;width:450px;">
        <button onclick="sendMessage()" style="height:28px;width:75px;">发送</button>
    </div>
</div>
<input value="0" id="one"/>
<div id="online"></div>
</body>
</html>